<template>
    <div style="margin-top: 100px;margin-left: 200px;margin-right: 200px">

        <h3 class="loginTitle" style="text-align: center">欢迎登录后台管理系统</h3>
            <el-form :model="form" class="loginContainer" ref="form" size="normal" :rules="rules">
                <el-form-item prop="username">
                    <el-input prefix-icon="el-icon-user-solid" v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>

                <el-form-item prop="password">
                    <el-input prefix-icon="el-icon-lock" v-model="form.password" show-password placeholder="请输入密码"></el-input>
                </el-form-item>

                <el-form-item prop="code">
                    <el-input type="text" auto-complete="false" v-model="form.code" placeholder="点击图片更换验证码" style="width: 250px;margin-right: 5px"></el-input>
                    <img :src="captchaUrl" @click="updateCaptcha">
<!--                    <img src='' @click="updateCaptcha"/>-->

                </el-form-item>

                <el-form-item prop="remember">
                    <el-checkbox v-model="checked" class="remember">记住我</el-checkbox>
                </el-form-item>

                <el-form-item prop="register">
                    <el-button type="text" @click="register">没有账号？去注册</el-button>
                </el-form-item>

                <el-form-item>
                    <el-button style="width: 100%" type="primary" @click="login">登 录</el-button>
                </el-form-item>
            </el-form>

    </div>
</template>

<script>
    import request from "../utils/request";

    export default {
        name: "Login",
        data(){
            return{
                captchaUrl:'',// 'captcha/time=' + new Date(),//避免是同一张图片
                form:{
                    username:'',
                    password:'',
                    // code:'',
                    token:''
                },
                //检验输入内容
                rules: {
                    username: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                    ],
                    // code: [
                    //     {required: true, message: '请输入验证码', trigger: 'blur'}
                    //     ,
                    //     {min: 5, max: 5, message: '长度在5个字符', trigger: 'blur'}
                    // ]
                    // ,
                    // code: [
                    //     {required: true, message: '是否记住密码', trigger: 'blur'}
                    //     ,
                    //     {min: 6, max: 10, message: '长度在 6 到 10 个字符', trigger: 'blur'}
                    // ]
                },
                checked:true
            }

        },
        methods:{

            //加载方法的时候调用 清除用户缓存
            created(){
                console.log('来了')
                this.updateCaptcha()
                sessionStorage.removeItem("accessToken")
            },

            login() {

                this.$refs['form'].validate((valid) => {//验证这个规则合法才会发送这个请求
                    if (!valid) return
                    if (valid) {

                        console.log("来登录啊:"+JSON.stringify(this.form));

                        //对密码进行加密

                        request.post("/user/login",this.form).then(res=>{
                            console.log("知道啊，token:" +JSON.stringify(res));

                            const user = JSON.stringify(res)
                            // const jwt = res.headers['Authorization']
                            // console.log("jwt" + jwt)
                            // this.$store.commit('SET_TOKEN',jwt)
                            if (res.code == 0){
                                    this.$message({
                                        type:"success",
                                        message:"登录成功"
                                    })

                                localStorage.setItem("accessToken",user.token)//缓存用户token信息
                                localStorage.setItem("userInfo",JSON.stringify(res.data))//缓存用户信息

                                window.sessionStorage.setItem("accessToken",user.token)
                                this.$router.replace("/index")//跳转到主页

                                    return res;
                                }else {
                                    this.$message({
                                        type:"error",
                                        message:res.msg
                                    })
                                    console.log("知道啊，网不对啊");

                                }
                            }
                        )
                    }
                });

            },

            register(){
                this.$router.replace("/register")//跳转到注册页

            },

            //在页面渲染加载的时候就要调用
            updateCaptcha(){
                console.log(',,,来了')

                request.get("/captcha").then(res =>{
                    console.log("res.captchaImg:" + JSON.stringify(res))
                    const base64Img = JSON.stringify(res.data.base64Img)
                    console.log("base64Img:" + base64Img);

                    if (res.code == 0){
                        this.$message({
                            type:"success",
                            message:"图片更新成功"
                        })
                        this.captchaUrl = base64Img
                        this.form.token = res.data.token
                    }else {
                        this.$message({
                            type:"error",
                            message:res.msg
                        })
                    }
                })
            }

        }
    }
</script>

<style >
    .loginContainer{
        border-right: 15px;
        background-clip: padding-box;
        margin: 50px auto;
        width: 350px;
        padding: 15px 35px 15px 35px;
        background: #ffffff;
        border: 1px solid #eeeeee;
        box-shadow: 0 0 25px #cac6c6;
    }

    .loginTitle{
        margin: 0px auto 48px auto;
        text-align: center;
    }

    .remember{
        text-align: left;
        margin: 0px auto 0px auto;
    }
    .el-form-item__content{
        display: flex;
        align-items: center;
    }

    .register{
        text-align: right;
        display: flex;
        margin: 0px auto 0px auto;

    }

</style>